@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
body {
  background: black;
}
p {
  margin: 0;
}
.container {
  font-size: 20px;
  color: white;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans";
  .box {
    width: 500px;
    height: 500px;
    margin: 80px auto;
    position: relative;
    line-height: 2;
    .eraser {
      position: absolute;
      inset: 0;
      .text {
        // --p: 30%;
        color: transparent;
        background: linear-gradient(
          to right,
          transparent var(--p),
          black calc(var(--p) + 5px)
        );
        animation: erase 5s forwards linear;
      }
    }
  }
}

@keyframes erase {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}
